<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        /*给父级添加flex属性*/
        display: flex;
        width: 800px;
        height: 300px;
        background-color: pink;
        /*默认的是x轴为主轴，y轴为侧轴，元素沿着主轴排列*/
        flex-direction: row;
        /*flex布局中默认的子元素不换行，如果装不开会缩小子元素的宽度*/
        flex-wrap: wrap;
        /*合写*/
        flex-flow: column wrap;
        /*设置主轴上子元素的排列方式*/
        justify-content: space-around;
        /*设置侧轴上的子元素的排列方式(单行)*/
        /*align-items: center;*/
        /*设置侧轴上的子元素的排列方式(多行)*/
        align-content: space-around;
    }

    div span {
        width: 150px;
        height: 100px;
        background-color: red;
        margin: 5px;
    }

    section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 0 auto;
    }

    section div:nth-child(1) {
        width: 100px;
        height: 150px;
        background-color: red;
    }

    section div:nth-child(2) {
        background-color: green;
        flex: 1;
    }

    section div:nth-child(3) {
        width: 100px;
        height: 150px;
        background-color: blue;
    }

    p {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 200px auto;
        /*让三个子盒子都下来*/
        /*align-items: flex-end;*/
    }

    p span {
        flex: 1;
    }
    p span:nth-child(3){
        /*只让第三个盒子下来*/
        align-self: flex-end;
        /*提到前面去*/
        order:-1;
    }
</style>
<body>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>3</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

<p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</p>
</body>
</html>